<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]="formGroup" *ngIf="showDestination" class="aui-gutter-column-md">
    <lv-form-item>
        <lv-form-label [lvRequired]="!isSlaDetail">
            {{'specify_the_destination_location_label' | i18n}}
        </lv-form-label>
        <lv-form-control>
            <div>
                <ng-container *ngIf="isSlaDetail">
                    <div *ngIf="!data[0]?.ext_parameters?.storage_info?.storage_type">
                        <lv-group lvGutter="16px">
                            <div>--</div>
                        </lv-group>
                    </div>
                    <div *ngIf="data[0]?.ext_parameters?.storage_info?.storage_type === 'storage_unit_group'">
                        <lv-group lvGutter="16px">
                            <div>{{'system_backup_storage_unit_group_label' | i18n}}</div>
                            <div>
                                {{
                                backupStorageUnitGroupNames?.length
                                ? find(backupStorageUnitGroupNames, { storageId: formGroup.value.storage_id })
                                ? find(backupStorageUnitGroupNames, {
                                storageId: formGroup.value.storage_id
                                })['label']
                                : '--'
                                : '--'
                                }}
                            </div>
                        </lv-group>
                    </div>
                    <div *ngIf="data[0]?.ext_parameters?.storage_info?.storage_type === 'storage_unit'">
                        <lv-group lvGutter="16px">
                            <div>{{'system_backup_storage_unit_label' | i18n}}</div>
                            <div>
                                {{
                                backupStorageUnitNames?.length
                                ? find(backupStorageUnitNames, { storageId: formGroup.value.storage_id })
                                ? find(backupStorageUnitNames, {
                                storageId: formGroup.value.storage_id
                                })['label']
                                : '--'
                                : '--'
                                }}
                            </div>
                        </lv-group>
                    </div>
                </ng-container>
                <ng-container *ngIf="!isSlaDetail">
                    <lv-group lvGutter="6px">
                        <lv-select [lvOptions]='backupStorageTypes' formControlName="storage_type" lvValueKey='value'
                            lvShowClear class="select-width"></lv-select>
                        <lv-select
                            *ngIf="formGroup.value.storage_type === 'storage_unit_group'  && formGroup.value.storage_type !== 'none'"
                            [lvOptions]="backupStorageUnitGroupNames" formControlName="storage_id" lvValueKey="value"
                            lvShowFilter lvFilterKey='label' lvFilterMode='contains' lvShowClear
                            class="select-width"></lv-select>
                        <lv-select
                            *ngIf="formGroup.value.storage_type === 'storage_unit'  && formGroup.value.storage_type !== 'none'"
                            [lvOptions]="backupStorageUnitNames" formControlName="storage_id" lvValueKey="value"
                            lvShowFilter lvFilterKey='label' lvFilterMode='contains' lvShowClear
                            [lvContentTemplate]="contentTpl" class="select-width"></lv-select>
                        <ng-template #contentTpl let-item>
                            <div class="unit-content">
                                <span>{{ item.label }}</span>
                                <aui-status [value]="item.runningStatus" type="StoragePoolRunningStatus" *ngIf="!!item?.runningStatus"></aui-status>
                            </div>
                        </ng-template>
                    </lv-group>
                </ng-container>
            </div>
        </lv-form-control>
    </lv-form-item>
</lv-form>